如何将 Observable<Some> 转换为其他 Observable<Other>

Question

我想使用 Transloco 并从现有 REST API 而不是 i18n 文件收集翻译。我用 rest 服务调用替换了 TranslocoHttpLoader 中的行：

  getTranslation(lang: string): Observable<Translation> {
    // return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
    return this.translationService.fetchTranslations();
  }

其中 Translation 是 Transloco 类型：

export declare type Translation = HashMap;

export declare type HashMap<T = any> = {
    [key: string]: T;
};

翻译 REST API 正在返回：

{
  "languageKeys": [
    {
      "key": "hello",
      "value": "hello transloco"
    },
    ...
 ]
}

所以

export class TranslationRest {
  languageKeys: LanguageKeyRest[] = [];
}

export class LanguageKeyRest {
  constructor(public key: string, public value: string) {}
}

所以我需要将 Observable<TranslationRest>“转换”为 Transloco 消耗的 Observable<Translation>：

翻译服务

public fetchTranslations(): Observable<Translation> {
  const response: Observable<TranslationRest> = this.httpClient.post<TranslationRest>(this.url, this.body, {'headers': this.headers});
  return this.convert1(response);
}

这个最简单的（用于测试目的）convert1 方法按预期工作：

private convert1(response: Observable<TranslationRest>): Observable<Translation> {
  return of({hello: 'hello transloco'})
}

html:

{{'hello' | transloco}}

在浏览器中显示：hello transloco

但是如何实现真正的转换呢？我尝试遵循 How to pipe / map an Observable in Angular 但没有运气：

  private convert2(response: Observable<TranslationRest>): Observable<Translation> {
    return response.pipe(
      map((res: TranslationRest) => res.languageKeys.map(item =>{
        item.key: item.value
      }))
    )
  }

Answer 1

你转换不正确

private convert2(response: Observable<TranslationRest>): Observable<Translation> {
    return response.pipe(
      map((res: TranslationRest) => res.languageKeys.reduce((obj, item) => ({
        ...obj,
        [item.key]: item.value,
      }), {}))
    )
}

如何将 Observable<Some> 转换为其他 Observable<Other>

How to convert Observable<Some> to other Observable<Other>

rxjs

typescript

angular

transloco